<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WeChat</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<style>

</style>

<body>
    <div class="login-box">
        <div class="window">
            <div class="cont-box">
                <div>
                    账号:<input type="text" name="log-username">
                    密码:<input type="password" name="log-password">
                    <br>
                    <button id="login">登录</button>
                    <div class="registe-but"> 注册>></div>
                </div>
                <div>
                    账号:<input type="text" name="reg-username">
                    密码:<input type="password" name="reg-password">
                    手机号:<input type="text" name="reg-phone">
                    账号名:<input type="text" name="reg-nickname">
                    <br>
                    <button id="registe">注册</button>
                    <div class="log-but"> ＜＜登录</div>
                </div>
            </div>
        </div>
    </div>

    <p class="nickname">
        用户名
    </p>
    <div class="box" id="friend-box">添加好友</div>
    <div class="box" id="friend-msg">好友通知</div>
    <div class="box" id="friend-list">好友列表</div>
    <div class="box">聊天室(单聊)</div>
    <div class="box">聊天室(群聊)</div>
    <div class="box">删除好友</div>

    <!-- 搜索框 -->
    <div class="rightBox" id="add-friend">
        <input type="text" name="phone" placeholder="请输入手机号">
        <button id="search">搜索</button>

        <ul id="userInfoList">
            <li></li>
        </ul>
    </div>

    <!-- 搜索框 -->
    <div class="rightBox" id="msg-frind">
        <ul id="userMsgList">
            <li>暂无新通知</li>
        </ul>
    </div>

    <!-- 搜索框 -->
    <div class="rightBox" id="my-frind">
        <ul id="userFrindList">
            <li>您还没有好友 快去添加把</li>
        </ul>
    </div>

</body>
<script src="js/jquery.js"></script>
<script src="./js/socket.js"></script>
<script>
    var addWin = false;
    var msgWin = false;
    var myFrindWin = false;
    $(function () {

        //登录
        $("#login").click(function () {
            var username = $("input[name='log-username']").val();
            var password = $("input[name='log-password']").val();
            $.ajax({
                url: "/users-info/login",
                type: "POST",
                dataType: 'json',
                data: JSON.stringify({
                    username: username,
                    password: password
                }),
                contentType: 'application/json',
                success: function (res) {
                    if (res.code == 200) {
                        $(".login-box").css("display", "none")
                        alert("登陆成功");
                        $(".nickname").html("<p>欢迎:" + res.data.nickname + "</p>")
                        console.log(res.data.userId)
                        localStorage.setItem("userId", res.data.userId)
                        loginSuccess()
                    } else {
                        alert(res.msg)
                    }
                }
            })
        })


        $(".registe-but").click(function () {
            $(".cont-box").animate({ left: -200 + "px" }, 500);
        })

        $(".log-but").click(function () {
            $(".cont-box").animate({ left: 0 + "px" }, 500);
        })


        var $addFriend = $("#add-friend").stop(true);
        var $msgFrind = $("#msg-frind").stop(true);
        var $myFrind = $("#my-frind").stop(true);
        //移动视窗
        $("#friend-box").click(function () {
            msgWin = move($msgFrind, true)
            myFrindWin = move($myFrind, true)
            addWin = move($addFriend, addWin)
        })

        //好友通知移动视窗
        $("#friend-msg").click(function () {
            addWin = move($addFriend, true)
            myFrindWin = move($myFrind, true)
            msgWin = move($msgFrind, msgWin)
            loadFriendMsgList();
        })

        //好友列表移动视窗
        $("#friend-list").click(function () {
            addWin = move($addFriend, true)
            myFrindWin = move($myFrind, myFrindWin)
            msgWin = move($msgFrind, true)
            $.ajax({
                url: "/users-friend/findFriendList",
                type: "GET",
                success: function (res) {
                    var html = "";
                    for (var i = 0; i < res.data.length; i++) {
                        html += "<li userId='"+res.data[i].userId+"'>" + res.data[i].nickname + " <button userId='" + res.data[i].userId + "' class='' >删除</button></li>";
                    }
                    $("#userFrindList").html(html);
                }
            })
        })

        //搜索
        $("#search").click(function () {
            //获取手机号
            var phone = $("input[name='phone']").val();
            if (phone == null) {
                alert("请输入手机号");
            }
            $.ajax({
                url: "/users-info/findByPhone/" + phone,
                type: "get",
                success: function (res) {

                    var html = "";
                    for (var i = 0; i < res.data.length; i++) {
                        html += "<li>" + res.data[i].nickname + " <button userId='" + res.data[i].userId + "' class='add' >添加</button></li>";
                    }
                    $("#userInfoList").html(html);
                }
            })
        })

        //注册
        $("#registe").click(function () {
            var username = $("input[name='reg-username']").val();
            var password = $("input[name='reg-password']").val();
            var phone = $("input[name='reg-phone']").val();
            var nickname = $("input[name='reg-nickname']").val();
            $.ajax({
                url: "/users-info/add",
                type: "POST",
                dataType: 'json',
                data: JSON.stringify({
                    username: username,
                    password: password,
                    phone: phone,
                    nickname: nickname
                }),
                contentType: 'application/json',
                success: function (res) {
                    console.log(res)
                    if (res.code == 200) {
                        alert("注册成功");
                    } else {
                        alert(res.msg)
                    }
                }
            })
        })

        //添加
        $(document).on("click", ".add", function () {
            var friendId = $(this).attr("userId");
            $.ajax({
                url: "/users-friend/add",
                type: "POST",
                dataType: 'json',
                data: JSON.stringify({
                    friendId: friendId,
                }),
                contentType: 'application/json',
                success: function (res) {
                    console.log(res)
                    if (res.code == 200) {
                        alert("申请成功");
                    } else {
                        alert(res.msg)
                    }
                }
            })
        })


        // 为.operate内的所有按钮绑定click事件
        $(document).on("click", ".operate", function (event) {
            var friendId = $(this).attr("userId");
            var choose;
            // 检查点击的是哪个子元素
            if ($(event.target).is('.agree')) {
                choose = 1
            }
            if ($(event.target).is('.refuse')) {
                choose = 2
            }
            $.ajax({
                url: "/users-friend/update",
                type: "PUT",
                dataType: 'json',
                data: JSON.stringify({
                    userId: friendId,
                    status: choose
                }),
                contentType: 'application/json',
                success: function (res) {
                    if (res.code == 200) {
                        alert(res.msg)
                    } else {
                        alert(res.msg)
                    }
                    loadFriendMsgList()
                }
            })
        });
    })

    function loadFriendMsgList() {
        $.ajax({
            url: "/users-friend/findFriendMsg",
            type: "get",
            success: function (res) {
                var html = "";
                for (var i = 0; i < res.data.length; i++) {
                    html += "<li>" + res.data[i].nickname + " <div userId='" + res.data[i].userId + "' class='operate'><button class='agree'>同意</button><button class='refuse'>拒绝</button></div></li>";
                }
                if (res.data.length == 0) {
                    html += "<li>暂无新通知<li>"
                }
                $("#userMsgList").html(html);
            }
        });
    }


    function move(location, isWin) {
        if (isWin) {
            position = -400;
            isWin = false;
        } else {
            position = -25;
            isWin = true;
        }
        $(location).animate({ right: position + "px" }, 1000);
        return isWin;
    }
</script>

</html>